<template>
  <div class="search">
    <div class="search-header">
      <header class="header">
        <van-icon @click="back" name="arrow-left" />
        <div class="header-input">
          <van-icon name="search" class="search-icon" />
          <input type="text" class="search-title" v-model="keyword" />
        </div>
        <span class="search-btn" @click="getSearch">搜索</span>
      </header>
      <van-tabs type="card" @click="change" color="#5fc6c2">
        <van-tab title="旅行游记" name="article"></van-tab>
        <van-tab title="旅行商品" name="good"></van-tab>
      </van-tabs>
    </div>
    <div v-show="classify == 'article'">
      <van-list :finished="finished2" finished-text="没有更多了">
        <router-link v-for="(item, i) of notes" :key="i" :to="`/articles/${item.tid}`" class="articleItem">
          <div>
            <h3>{{ item.title }}</h3>
            <p class="articleDes"></p>
            <ul>
              <li>游玩地点：{{ item.destination }}</li>
              <li>发表时间：{{ item.create_time }}</li>
            </ul>
          </div>
          <div><img class="articleImg" :src="item.cover_img" alt="" /></div>
        </router-link>
      </van-list>
      <div v-show="finished2 == false" @click="moreNotes" class="click-more">点击查看更多商品</div>
    </div>
    <div v-show="classify != 'article'" class="goodsList">
      <van-list :finished="finished1" finished-text="没有更多了">
        <div class="goodsList">
          <router-link :to="`/tourMdetails/${t.gid}`" v-for="(t, i) of goodsList" :key="i">
            <div class="good-item">
              <van-image fit="scale-down" :src="t.main_img"></van-image>
              <div class="good-info">
                <div class="good-title">{{ t.title }}</div>
                <div class="price">
                  <span class="icon">¥</span>
                  <span class="num">{{ t.price }}</span>
                  起/人
                  <span class="buy">{{ t.buy_count }}人已购买</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </van-list>
      <div v-show="finished1 == false" @click="moreGood" class="click-more">点击查看更多商品</div>
    </div>
  </div>
</template>
<script>
// 引入搜索API
import { searchNotes } from '../server/article';
import { searchGoods } from '../server/goods';

export default {
  data() {
    return {
      keyword: '', // 搜索关键词
      notePage: 1, // 初始化商品搜索页码
      goodPage: 1, // 初始化商品搜索页码
      classify: 'article', // 搜索类别(文章or商品),默认为搜索游记
      notes: [], //保存游记列表
      goodsList: [], //保存商品列表
      finished1: true, //商品是否加载完毕
      finished2: true, //游记是否加载完毕
    };
  },
  methods: {
    // 返回上一页
    back() {
      this.$router.go(-1);
    },
    change(name) {
      // 切换搜索品类后,将page都改为初始值1
      this.notePage = 1;
      this.goodPage = 1;
      this.classify = name;
      if (this.keyword != '') {
        // 如果关键词不为空,在切换分类的时候执行搜索
        this.getSearch();
      }
    },
    // 执行搜索
    getSearch() {
      // 加载中
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      });
      // 选中分类为查询文章
      if (this.classify == 'article') {
        // 点击搜索,默认将页码修改为初始值1
        this.notePage = 1;
        // 调用查询方法
        searchNotes(this.notePage, this.keyword).then((result) => {
          for (var i = 0; i < result.result.length; i++) {
            result.result[i].create_time = this.moment(result.result[i].create_time).format('YYYY-MM-DD');
          }
          this.notes = result.result;
          this.finished2 = false;
          this.$toast.clear();
          // 如果查询结果为空,则反馈
          if (result.result.length == 0) {
            this.$toast.fail('未查询到结果');
            this.finished2 = true;
          }
        });
      } else {
        // 否则为查询商品
        // 点击搜索,默认将页码修改为初始值1
        this.goodPage = 1;
        searchGoods(this.goodPage, this.keyword).then((result) => {
          this.goodsList = result.result;
          this.finished1 = false;
          this.$toast.clear();
          // 如果查询结果为空,则反馈
          if (result.result.length == 0) {
            this.$toast.fail('未查询到结果');
            this.finished1 = true;
          }
        });
      }
    },
    // 更多商品
    moreGood() {
      this.goodPage++;
      // 加载中
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      });
      searchGoods(this.goodPage, this.keyword).then((result) => {
        this.goodsList = [...this.goodsList, ...result.result];
        this.finished1 = false;
        this.$toast.clear();
        // 如果查询结果为空,则反馈
        if (result.result.length == 0) {
          this.finished1 = true;
          this.$toast.clear();
          this.$toast.fail('没有更多了');
        }
      });
    },
    // 更多文章
    moreNotes() {
      this.notePage++;
      // 加载中
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      });
      searchNotes(this.notePage, this.keyword).then((result) => {
        for (var i = 0; i < result.result.length; i++) {
          result.result[i].create_time = this.moment(result.result[i].create_time).format('YYYY-MM-DD');
        }
        this.notes = [...this.notes, ...result.result];
        this.finished2 = false;
        this.$toast.clear();
        // 如果查询结果为空,则反馈
        if (result.result.length == 0) {
          this.finished2 = true;
          this.$toast.clear();
          this.$toast.fail('没有更多了');
        }
      });
    },
  },
};
</script>
<style lang="scss">
@import './scss/search.scss';
</style>
